import { ElStep, ElSteps } from 'element-plus';
import { defineComponent, ref } from 'vue';
import Style from './1080.module.scss';
import Num from './num';
import router from "@/router";
import {ISteps} from '@/api/typing'
import {useBreadcrumbStore} from "@/store/modules/breadcrumb";
import {XZLHFF} from "@/config";
export const Steps = defineComponent({
    setup() {
        // 非付费挂号
        const stepghList = ref<ISteps[]>([
            {id:'1', title: "读卡"},
            {id:'2', title: "选择诊区"},
            {id:'3', title: "选择科室"},
            {id:'4', title: "医生选择"},
            {id:'5', title: "号源选择"},
            {id:'6', title: "信息确认"},
            {id:'7', title: "领取凭条"}
        ]);
        // 付费挂号
        const stepGHList = ref<ISteps[]>([
            {id:'1', title: "读卡"},
            {id:'2', title: "选择诊区"},
            {id:'3', title: "选择科室"},
            {id:'4', title: "医生选择"},
            {id:'5', title: "号源选择"},
            {id:'6', title: "信息确认"},
            {id:'7', title: "自助缴费"},
            {id:'8', title: "领取凭条"}
        ]);
        // 预约
        const stepYYList = ref<ISteps[]>([
            {id:'1', title: "读卡"},
            {id:'2', title: "选择诊区"},
            {id:'3', title: "选择科室"},
            {id:'4', title: "医生选择"},
            {id:'5', title: "号源选择"},
            {id:'6', title: "信息确认"},
            {id:'7', title: "领取凭条"}
        ]);
        // 门诊缴费 的step
        const stepMzjfList = ref<ISteps[]>([
            {id:'1', title: "读卡"},
            {id:'2', title: "门诊缴费"},
            {id:'3', title: "自助缴费"},
            {id:'4', title: "缴费成功"}
        ]);
        // 住院预交金 的step
        const stepZyjyjList = ref<ISteps[]>([
            {id:'1', title: "读卡"},
            {id:'2', title: "住院预交金"},
            {id:'3', title: "自助缴费"},
            {id:'4', title: "领取凭条"}
        ]);

        const stepList = ref<ISteps[]>([]);
        const lx = useBreadcrumbStore();
        // 如果lx为挂号或预约，则将stepGHList赋给stepList
        switch (lx.titlelx) {
            case '挂号':
                if (XZLHFF){stepList.value = stepghList.value;break;}
                else {stepList.value = stepGHList.value;break;}
            case '预约':stepList.value = stepYYList.value;break;
            case '门诊缴费':stepList.value = stepMzjfList.value;break;
            case '住院预交金':stepList.value = stepZyjyjList.value;break;
        }
        // 获取当前页面的标题
        const title =router.currentRoute.value.meta.title;
        // 当前页所在步骤条的索引
        const activeindex = stepList.value.findIndex(item => item.title === title);

        return () => (<>
            <div class={Style.steps}>
                <div class={Style.steps_pad}>
                    <ElSteps
                        active={activeindex}
                        align-center
                        finish-status="success"
                    >
                        {
                            stepList.value.map((item, index) => {
                                return <ElStep title={item.title}>
                                    {{
                                        icon: () => {
                                            return <>
                                                <Num num={index} activeNum={activeindex}></Num>
                                            </>
                                        }
                                    }}
                                </ElStep>
                            })
                        }
                    </ElSteps>
                </div>

            </div>
        </>);
    }
})
